<template>
	<view class="Deta-container">
		<view class="Deta-title-button">
			<view class="Deta-title">
				<text>{{title}}</text>
				<text @click="showIntro">(免费额度:{{freeTime}}小时)</text>
			</view>
			<view class="toUrl">
				<view class="Deta-button">
					<button :disabled="state !== '预约'" type="default"  @click="toUrl">{{state}}</button>
				</view>
			</view>
		</view>
		<view class="container-paragraph-p">
			<view class="container-paragraph-model">
				<view>{{details}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: String,
			details: String,
			state: String,
			freeTime:Number,
		},
		methods: {
			toUrl() {
				this.$emit("confirm")
			},
			showIntro(){
				uni.showModal({
					title: '免费时长介绍',
					content:"每月会有一定的免费使用额度，详情请咨询个人管家，工作日时间可使用免费额度",
					showCancel:false
				})
			}
		}
	}
</script>

<style>
	.Deta-container {
		width: 100%;
	}

	.Deta-title-button {
		width: 100%;
		overflow: hidden;
	}

	.Deta-title {
		float: left;
		height: 120rpx;
		line-height: 120rpx;
	}

	.Deta-title text {
		font-size: 32rpx;
		font-family: "微软雅黑";
		margin-left: 36rpx;
	}

	.Deta-button {
		float: right;
		height: 120rpx;
		position: relative;
	}

	.Deta-button button {
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		margin-right: 36rpx;
		position: absolute;
		line-height: 80rpx;
		width: 260rpx;
		height: 80rpx;
		border-radius: 120rpx;
		background-color: rgba(233, 33, 38, 1);
		color: #FFFFFF;
	}

	.container-paragraph-p {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.container-paragraph-model {
		width: 100%;
		margin-left: 36rpx;
		margin-right: 36rpx;
		line-height: 50rpx;
	}

	.container-paragraph-model view {
		font-size: 28rpx;
		font-family: '微软雅黑';
		text-indent: 2em;
		margin-bottom: 16rpx;
		color: #999999;
		text-align: justify;
		/*通过增加或减少字或字母之间的空格对齐文本*/
		text-justify: newspaper;
		/*允许在单词内换行*/
		word-break: break-all;
		/* 允许存在换行符,其他正常显示 */
		white-space: pre-line;
	}
</style>
